<!-- Created by duwanfu on 2018/12/16 -->
<template>
  <div class="wraper">
    <!--优选贷款-->
    <div class="content">
      <div class="title">
        <span class="content-title">优选贷款</span>
      </div>
      <div class="loans-list">
        <div class="over">
          <div v-for="(item, i) in hotList"
               @click="toLink(item.loanId)"
               class="fl">
            <h3>{{item.maxAmount}}</h3>
            <p>最高可贷(元)</p>
            <div class="logos">
              <img :src="item.logoUrl" alt="">
            </div>
            <p>{{item.loanName}}</p>
            <p>{{item.loanDesc}}</p>
          </div>
        </div>
      </div>
    </div>
    <!--热门贷款-->
    <div class="content">
      <div class="title">
        <span class="content-title">热门贷款</span>
      </div>
      <div class="hot-loands-list">
        <div class="hot-loands-list-item"
             @click="toLink(item.loanId)"
             v-for="(item, i) in list">
          <div class="headImg">
            <img :src="item.logoUrl" alt="">
          </div>
          <div class="describe">
            <div>{{item.loanName}}</div>
            <div>{{item.maxAmount}}</div>
            <div>{{item.loanDesc}}</div>
            <div>最高可贷</div>
          </div>
          <div class="applyed">{{12}}人已申请</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { browserMixin, certificationMixin } from '../../assets/js/mixin'

  export default {
    name: "loans",
    mixins: [browserMixin, certificationMixin],
    data() {
      return {
        hotList: [],
        list: []
      }
    },
    created() {
      this.getLoansList()
    },
    methods: {
      getLoansList() {
        this.$http.getLoansList().then(res => {
          console.log(res);
          let data = res.data;
          this.hotList = data.hot
          this.list = data.list
        })
      },
      toLink (loanId) {
        if (this._isAuthName) {
          let params = {
            loanid: loanId
          }
          this.$http.getLinkUrl(params).then(res => {
            let url = res.data
            location.href = url
          })
        } else {
          this.$router.push({path: '/apply'})
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .wraper {
    min-height: calc(100vh - 1rem);
    background-color: #f1f0ee;
    padding-bottom: 1rem;
    .content {
      width: 100%;
      box-sizing: border-box;
      background: #f8f8f4;
      padding: 0 .3rem .3rem;
      margin-bottom: .2rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
      .title {
        font-size: .3rem;
        height: .6rem;
        line-height: .6rem;
        margin-bottom: .1rem;
        .content-title {
          padding-left: .2rem;
          font-weight: bold;
          background: url("../../assets/imgs/icon-title.png") no-repeat left center;
          background-size: .06rem .28rem;
        }
        .more {
          color: #666;
          padding-right: .25rem;
          background: url("../../assets/imgs/icon-right.png") no-repeat right .18rem;
          background-size: .19rem .26rem;
        }
      }
      .loans-list {
        width: 100%;
        height: 3.53rem;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar {
          display: none !important;
        }
        .over {
          width: max-content;
          height: 3.53rem;
          & > div {
            position: relative;
            width: 2.7rem;
            height: 100%;
            background: url("../../assets/imgs/loans-bg.png") no-repeat;
            background-size: 2.7rem 100%;
            margin-right: .2rem;
            border-radius: .1rem;
            text-align: center;
            &:last-child {
              margin-right: 0;
            }
            h3 {
              font-size: .42rem;
              color: #ffffff;
              padding: .35rem 0 .2rem;
            }
            p:nth-child(2) {
              color: #ffffff;
              font-size: .2rem;
            }
            .logos {
              position: absolute;
              width: .68rem;
              height: .68rem;
              border-radius: 50%;
              overflow: hidden;
              background: black;
              left: 50%;
              top: 1.38rem;
              transform: translateX(-50%);
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            p:nth-child(4) {
              font-size: .26rem;
              font-weight: bold;
              margin: 1rem 0 .2rem;
            }
            p:nth-child(5) {
              font-size: .2rem;
            }
          }
        }
      }
      .hot-loands-list {
        &-item {
          display: flex;
          flex-wrap: wrap;
          /*height: 1rem;*/
          width: 100%;
          box-sizing: border-box;
          padding: .35rem .3rem 0;
          background: #ffffff;
          margin-bottom: .2rem;
          box-shadow: 0 0 20px rgba(0, 0, 0, .2);
          border-radius: .1rem;
          .headImg {
            width: .68rem;
            height: .68rem;
            margin-right: .15rem;
            border-radius: 50%;
            overflow: hidden;
            background: #000;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .describe {
            display: flex;
            flex-wrap: wrap;
            width: calc(100% - 0.83rem);
            & > div {
              width: 50%;
              height: 50%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              &:nth-child(odd) {
                justify-content: flex-start;
              }
              &:nth-child(1) {
                font-size: .26rem;
                font-weight: bold;
              }
              &:nth-child(2) {
                font-size: .42rem;
                color: #dd001b;
              }
              &:nth-child(3) {
                font-size: .2rem;
                color: #666;
              }
              &:nth-child(4) {
                font-size: .2rem;
                color: #999;
              }
            }
          }
          .applyed {
            width: 100%;
            height: .36rem;
            padding-left: .83rem;
            font-size: .2rem;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
</style>
